<!--
 * @version: 
 * @Author: yu
 * @Date: 2023-07-12 14:58:42
 * @LastEditors: Andy
 * @LastEditTime: 2023-07-12 22:42:47
-->
<template>
    <el-dialog :model-value="props.isShow" :title="props.isAdd ? '添加管理员' : '编辑管理员'" :before-close="close">
        <el-form :model="form" :rules="rules" ref="memberRef">

            <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
                <el-select v-model="form.roleid" placeholder="请选择所属角色">
                    <el-option v-for="item in store.getters['role/getRole']" :key="item.id" :label="item.rolename"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off"></el-input>
                <p v-if="!props.isAdd">留空则不修改</p>
            </el-form-item>


            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                    :inactive-value="2">
                </el-switch>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel(memberRef)">取消</el-button>
                <el-button type="primary" @click="confirm(memberRef)">确 定</el-button>

            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { defineProps, ref, reactive, defineEmits, defineExpose } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { userAdd, userInfo, userEdit } from '@/request/api'
import { useStore } from 'vuex'
import { ElMessage } from "element-plus";

//定义父子组件接收
let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})

let emits = defineEmits(['cancel'])

let memberRef = ref<FormInstance>()
let store = useStore()
// console.log(store);
store.dispatch('role/listActions')
store.dispatch('member/countActions') 
let typeId = 0
interface RuleForm {
    roleid: string,
    username: string,
    password: string,
    status: number
}


let form = ref({
    roleid: '',  //角色编号
    username: '',  //管理员名称
    password: '',  //密码
    status: 1   //状态  1正常2禁用
})

const formLabelWidth = '120px'

const rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 8, message: '字符串长度是2到8', trigger: 'blur' },
    ],
    roleid: [
        {
            required: true,
            message: '请输入所属角色',
            trigger: 'change',
        },
    ],
})


//取消
const cancel = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    emits('cancel', false)
    form.value = {
        roleid: '',  //角色编号
        username: '',  //管理员名称
        password: '',  //密码
        status: 1   //状态  1正常2禁用
    }
    //清空规则验证
    formEl.resetFields()
}

const close = (done: any) => {
    done;
    cancel(memberRef.value)
}


//确定
const confirm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((val) => {
        if (val) {
            // console.log(val);
            // console.log(form.value);
            if (props.isAdd) {
                userAdd(form.value).then((res: any) => {
                    // console.log(res);
                    if (res.code === 200) {
                        //消息提示
                        ElMessage.success(res.msg)
                        //取消弹窗
                        cancel(memberRef.value)
                        store.dispatch('member/listActions')
                        store.dispatch('member/countActions') 
                    }

                })
            } else {
                userEdit({ ...form.value, id: typeId }).then((res: any) => {
                    if (res.code === 200) {
                        //消息提示
                        ElMessage.success(res.msg)
                        //取消弹窗
                        cancel(memberRef.value)
                        store.dispatch('member/listActions')
                    }
                })
            }

        }
    })

}

//回显
const getDetail = (uid: any) => {
    // console.log(uid);
    typeId = uid
    userInfo({ uid }).then((res: any) => {
        // console.log(res);
        if (res.code === 200) {
            form.value = res.list
            form.value.password = ''
        }
    })
}


defineExpose({
    getDetail
})






</script>

<style></style>